<template>
    <div class="topicDetails">
        <x-header :left-options="{showBack: true,backText:'话题详情'}" class="headerBox"></x-header>
        <div class='topicHead'>
            <img src='../assets/images/chidrens01.png'/>
            <div class='topicRight'>
                <div class='topicTitle'>#麦月小苍尔课程推荐#<span>课程</span></div>
                <div class='number'>阅读624万<span>谈论4751</span></div>
            </div>
        </div>

        <div class='topicCont'>
            <div class='topicTxt'>【#麦月小苍尔课程推荐#】这般丰富的内容，简直和作家写出来的差不多呀！这般丰富的内容，简直和作家写出来的差不多呀！</div>
            <img src='../assets/images/banner10.png'/>
        </div>

        <div class="topicMeun">
            <div>
                <span>转发960</span>
                <span class="ml30">评论1927</span>
            </div>
            <div>赞123</div>
        </div>
        <div class="commentBox">
            <div class='sort'>
                <img src='../assets/images/sort01.png'/>按热度
            </div>
            <div class="evaList" v-for="(eva, index) in evaList" :key="index">
                <div class="evaList_left">
                    <img :src="eva.headImg"/>
                </div>
                <div class="evaList_right">
                    <div class='evaList_right_top'>{{eva.name}}</div>
                    <div class='evaList_right_middle'>{{eva.contentTxt}}</div>
                    <div class='evaList_right_link'>
                        <div class="evaList_right_link_name">{{eva.otherName}}</div>
                        <div>等人</div>
                        <div class="evaList_right_link_num">共{{eva.replyNum}}条回复></div>
                    </div>
                    <div class="evaList_right_bottom">
                        <div class="evaList_right_bottom_left">{{eva.time}}</div>
                        <div class="evaList_right_bottom_right">
                            <img src="../assets/images/share10.png"/>
                            <img src="../assets/images/Reply12x.png"/>
                            <img src="../assets/images/live11.png"/>
                            <div>{{eva.zanNum}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='bottomMenus'>
            <div>
                <img src="../assets/images/share10.png"/>
                <span>转发</span>
            </div>
            <div>
                <img src="../assets/images/Reply12x.png"/>
                <span>评论</span>
            </div>
            <div>
                <img src="../assets/images/live11.png"/>
                <span>赞</span>
            </div>
        </div>
        
    </div>
</template>

<script>
    import { XHeader } from "vux";
    export default {
        components:{
            XHeader
        },
        data(){
            return{
                evaList:[
                    {
                        headImg: require('../assets/images/playback05.png'),
                        name: '高慧雯',
                        contentTxt: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
                        otherName: '纵我七情六欲半晌愁',
                        replyNum: 233,
                        time: '12-25 18:17',
                        zanNum: 3157
                    },
                    {
                        headImg: require('../assets/images/playback05.png'),
                        name: '高慧雯',
                        contentTxt: '内容紧贴现代生活，新颖别致，把握时代脉搏，尽现时代气息。',
                        otherName: '纵我七情六欲半晌愁',
                        replyNum: 233,
                        time: '12-25 18:17',
                        zanNum: 3157
                    }
                ]
            }
        }
        
    }
</script>

<style lang="less" scoped>
.topicDetails{
    /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title{
        color: #000;
        font-size: 30px;
    }
  }

    //话题样式
    .topicHead{
        padding: 30px;
        display:flex;
        align-items:center;
        background: -webkit-linear-gradient(left, #1EAFE5 , #1E82E5); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #1EAFE5, #1E82E5); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #1EAFE5, #1E82E5); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #1EAFE5 , #1E82E5); /* 标准的语法 */
        color: #fff;
        img{
            width: 140px;
            height: 140px;
        }
        .topicRight{
            margin-left: 20px;
            .topicTitle{
                font-size: 40px;
                display:flex;
                align-items:center;
                margin-bottom:20px;
                span{
                    background: #3ABA46;
                    font-size: 16px;
                    padding: 4px 8px;
                    border-radius: 5px; 
                    margin-left: 10px;
                }
            }
            .number{
                font-size: 28px;
                span{
                    margin-left: 20px;
                }
            }
        }
    }    
    .topicCont{
        padding: 30px;
        background: #fff;
        border-top: 20px solid #F8F9FA;
        .topicTxt{
            font-size: 30px;
            text-indent: 2em;
            line-height: 1.6;
        }
        img{
            width: 680px;
            height: 440px;
            margin-top: 20px;
        }  
    }

    .topicMeun{
        background-color: #fff;
        border-top: 20px solid #F8F9FA;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        padding: 20px 30px;
        font-size: 30px;
        color: #888;
        .ml30{
            margin-left: 30px;
        }
    }
    .commentBox{
        padding: 20px 30px;
        margin-bottom: 89px;
        .sort{
            text-align: right;
            font-size: 26px;
            color: #6F7DA6;
            img{
                width: 23px;
                height: 20px;
                margin-right: 10px;
            }
        }
    }

    // 评论
    .evaList {
        display: flex;
        padding-top:20px;
        .evaList_left {
            margin-right: 20px;
            img {
                width: 80px;
                height: 80px;
                margin-top: 20px;
            }
        }
        .evaList_right {
            width: 100%;
            font-size: 35px;
            border-bottom: 1px solid #eeeeee;
            .evaList_right_top{
                color: #575757;
            }
            .evaList_right_middle {
                margin: 10px 0;
            }
            .evaList_right_link {
                margin: 10px 0;
                background-color: #f7f7f7;
                display: flex;
                align-items: center;
                padding: 10px 20px;
                font-size: 30px;
                .evaList_right_link_name {
                    max-width: 260px;
                    color: #5f7293;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .evaList_right_link_num {
                    color: #5f7293;
                    margin-left: 20px;
                }
            }
            .evaList_right_bottom {
                margin: 20px 0;
                color: #a7a7a7;
                font-size: 24px;
                display: flex;
                justify-content: center;
                /* align-items: center; */
                .evaList_right_bottom_right {
                    margin-left: auto;
                    display: flex;
                    align-items: center;
                    img {
                        width: 30px;
                        height: 28px;
                        margin: 0px 20px;
                    }
                    div {
                        display: inline-block;
                        font-size: 32px;
                    }
                }
            }
        }
    }
    .bottomMenus{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #f8f8f8;
        border-top: 1px solid #e8e8e8;
        display: flex;
        div{
            flex: 1;
            text-align: center;
            margin: 20px 0;
        }
        &>div:not(:first-child){
            border-left: 2px solid #d9d9d9;
        }
        img{
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }
        span{
            font-size: 30px;
            margin-left: 10px;
            color: #575757;
        }
    }
     
}
</style>